<template>
  <div class="createPost-container">
    <!--外层表单 开始-->
    <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">
      <div class="createPost-main-container">
        <el-col :span="12" :offset="6">
          <el-form-item label-width="110px" label="推送说明：" class="postInfo-container-item">
            <el-col :span="21">
              <span>1、全部推送：小米手机默认小米推送， iPhone和其他Android手机默认友盟推送 <br/>2、目标推送：默认为友盟推送 <br/>3、每天最多可推送十次 <br/>4、定时推送仅支持全体用户，目标用户不选，默认全体用户</span>
            </el-col>
          </el-form-item>
          <el-tooltip class="item" effect="dark" content="请输入推送标题" placement="top">
            <el-form-item label-width="110px" label="推送标题：" class="postInfo-container-item" prop="title">
              <el-col :span="21">
                <el-input style="min-width:480px" placeholder="请输入推送标题" maxlength="100" v-model="postForm.title">
                </el-input>
              </el-col>
            </el-form-item>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="请输入推送内容" placement="top">
            <el-form-item label-width="110px" label="推送内容：" class="postInfo-container-item" prop="content">
              <el-col :span="21">
                <el-input style="min-width:480px" placeholder="请输入推送内容" maxlength="100" v-model="postForm.content"
                          type="textarea" :autosize="{ minRows: 2, maxRows: 4}">
                </el-input>
              </el-col>
            </el-form-item>
          </el-tooltip>
          <el-form-item label-width="110px" label="推送图片：" class="postInfo-container-item">
            <el-col :span="21">
              <el-upload
                :headers="headers"
                action="/tools/oss/upload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleUploadSuccess"
                list-type="picture"
                :file-list="fileList"
                :accept="'.png,.jpg,,.jpeg,.gif'"
                :limit="2">
                <el-button size="small" type="primary" icon="el-icon-upload2">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">注：小米平台及低版本ios手机推送无图片 建议图片38X38</div>
              </el-upload>
            </el-col>
          </el-form-item>
          <el-form-item label-width="110px" label="目标用户：" class="postInfo-container-item">
            <el-col :span="21">
              <el-button size="small" @click="handleClickTargetUser" type="primary">目标用户</el-button>
              <el-button size="small" @click="clearTag" v-if="multipleSelection.length !==0">重置</el-button>
              <div v-if="postForm.pushAllResult ==1 && multipleSelection.length == 0">
                <el-tag
                  style="margin-right:10px"
                  :disable-transitions="false" type="info">全部
                </el-tag>
              </div>
              <div v-else>
                <el-tag
                  style="margin-right:10px"
                  :key="index"
                  v-for="(tag , index) in multipleSelection"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)" type="info">
                  {{tag.nickName}}
                </el-tag>
              </div>
            </el-col>
          </el-form-item>
          <el-form-item label-width="110px" label="跳转类型：" class="postInfo-container-item">
            <el-col :span="21">
              <el-select v-model="postForm.skip" placeholder="请选择跳转类型">
                <el-option
                  v-for="item in brandListOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-tooltip class="item" effect="dark" :content="holderVal.placeholder" placement="top">
            <el-form-item label-width="110px" :label="holderVal.name" class="postInfo-container-item"
                          prop="skipRemarks">
              <el-col :span="21">
                <el-input style="min-width:480px" :placeholder="holderVal.placeholder" v-model="postForm.skipRemarks">
                </el-input>
              </el-col>
            </el-form-item>
          </el-tooltip>
          <el-form-item label-width="110px" label="推送时间：" class="postInfo-container-item">
            <el-col :span="21">
              <el-radio v-model="radio" label="1">立即推送</el-radio>
              <el-radio v-model="radio" label="2">定时推送</el-radio>
              <el-date-picker
                style="margin-left:10px"
                v-show="radio == 2"
                v-model="postForm.start"
                type="datetime"
                :picker-options="pickerOptions"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label-width="110px" label="过期时间：" class="postInfo-container-item">
            <el-col :span="21">
              <el-date-picker
                v-model="postForm.expired"
                type="datetime"
                :picker-options="pickerOptions"
                placeholder="选择日期时间">
              </el-date-picker>
              <span style="margin-left:10px">推送后最多7天内有效</span>
            </el-col>
          </el-form-item>
          <el-form-item class="leftPaddingChange">
            <el-button type="primary" size="small" @click="submitForm()">保存</el-button>
            <el-button size="small" @click="cancelChangeLesson()" plain>取消</el-button>
          </el-form-item>
        </el-col>
      </div>
    </el-form>
    <!--外层表单 结束-->

    <!--用户选择 dialog开始-->
    <el-dialog title="升学端消息推送" :visible.sync="dialogTableVisible" v-if="dialogTableVisible" @keydown.native.enter="handleFilter" :before-close="closePushDialog">
      <span style="margin-left:10px" v-show="notUploadFile">手机号码：</span>
      <el-input size="small" style="width:200px;margin-left: 0" class="filter-item" placeholder="请输入手机号" v-model="postForm.mobile" v-show="notUploadFile"></el-input>
      <span style="margin-left:50px" v-show="notUploadFile">用户类型：</span>
      <el-select size="small" v-model="postForm.userType" placeholder="请选择" style="margin-bottom:10px" v-show="notUploadFile">
        <el-option v-for="item in userTypes" :key="item.code" :label="item.label" :value="item.code"></el-option>
      </el-select>
      <br v-show="notUploadFile"/>
      <span style="margin-left:10px" v-show="notUploadFile">所属学校：</span>
      <el-select
        size="small"
        v-model="postForm.schoolId"
        clearable
        filterable
        remote
        reserve-keyword
        placeholder="请输入关键词"
        style="margin-bottom:10px"
        v-show="notUploadFile"
        :remote-method="getSchoolOptions"
        :loading="isSchoolLoading">
        <el-option v-for="item in schoolsByTitleOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <span style="margin-left:50px" v-show="notUploadFile">所属地区：</span>
      <el-cascader
        size="small"
        change-on-select clearable placeholder="请选择地区" expand-trigger="click"
        :options="areas"
        v-model="areaOption"
        v-show="notUploadFile"
        style="margin-bottom:10px"
        @change="bindAreaChangeHandle"
      ></el-cascader>
      <br v-show="notUploadFile"/>
      <div class="upload">
        <el-upload
          class="upload-demo"
          ref="upload"
          :http-request="uploadExcelFile"
          name="123432"
          :file-list="fileList_2"
          :on-exceed="handleExceed"
          style="margin-bottom:10px"
          accept=".xls, .xlsx"
          action="customize"
          :headers="headers"
          :limit="1"
        >
          <el-button size="small" icon="el-icon-upload2" type="primary">上传EXCEL文件</el-button>
        </el-upload>
      </div>
      <br/>
      <el-button size="small" class="filter-item" style="margin-bottom:10px; margin-left: 10px;" type="primary" icon="el-icon-download" @click="downloadModel">下载模板</el-button>
      <el-button size="small" class="filter-item" style="margin-left:10px;" type="primary" icon="el-icon-search" @click="handleFilter" v-show="notUploadFile">搜索</el-button>
      <el-button
        size="small"
        class="filter-item"
        style="margin-left: 10px;"
        type="success"
        icon="el-icon-success"
        @click="saveUser">保存
      </el-button>
      <el-col style="margin-top: 10px;" v-show="dialogRadioStatusVisible">
        <el-radio v-model="postForm.pushAllResult" :label="0" style="margin-left: 15px">取消全部选中</el-radio>
        <el-radio v-model="postForm.pushAllResult" :label="1">选中全部结果</el-radio>
      </el-col>

      <el-table
        v-if="postForm.pushAllResult == 0"
        :data="list"
        v-loading="listLoading"
        ref="list"
        @select='getEveryPageSlectionChanged'
        @select-all='getEveryPageSlectionAllChanged'
        @selection-change="selectChangeHandler"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column property="nickName" label="用户名" width="200"></el-table-column>
        <el-table-column property="mobile" label="手机号"></el-table-column>

      </el-table>
      <div style="padding-top:30px;margin-top:20px">
        <el-pagination v-if="postForm.pushAllResult == 0" 
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange"
          :current-page="notUploadFile ? listQuery.pageNo : uploadFilePagination.pageNo"
          :page-sizes="[10,20,30,50]" :page-size="notUploadFile ? listQuery.pageSize : uploadFilePagination.pageSize"
          layout="total, sizes, prev, pager, next" :total="total" background>
        </el-pagination>
      </div>

    </el-dialog>
    <!--用户选择 dialog结束-->

    <!--提示弹框-->
    <el-dialog
      title="提示"
      :visible.sync="confirmDialog"
      width="30%">
      <span>{{confirmDialogTips}}</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="confirmDialog = false">取 消</el-button>
          <el-button type="primary" @click="confirmSave">确 定</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
  import Tinymce from '@/components/Tinymce'
import Upload from '@/components/Upload/headImage'
import MDinput from '@/components/MDinput'
import Multiselect from 'vue-multiselect' // 使用的一个多选框组件，element-ui的select不能满足所有需求
import 'vue-multiselect/dist/vue-multiselect.min.css' // 多选框组件css
import { add, getUserList, getConserve, upload } from '@/api/push'
import { getAreaList } from '@/api/school'
  import { mapGetters, mapActions } from 'vuex'
  import { getUserType } from '@/api/user'
  import { getToken } from '@/utils/auth' // 验权

  export default {
    name: 'articleDetail',
    components: {
      Tinymce,
      MDinput,
      Upload,
      Multiselect
    },
    data() {
      return {
        files: {},
        notUploadFile: true,
        uploadFilePagination: {
          pageNo: 1,
          pageSize: 10
        },
        fileObj: {},
        dialogRadioStatusVisible: false,
        headers: {},
        areaOption: [''], // 地区多级联动v-model绑定
        areas: [], // 地区多级联动结构化数组
        holderVal: {
          placeholder: '请输入商品id',
          name: '商品id：'
        },
        holderMap: {
          'lesson_detail': {
            placeholder: '请输入商品id',
            name: '商品id：'
          },
          'infomation_detail': {
            placeholder: '请输入资讯id',
            name: '资讯id：'
          },
          'url': {
            placeholder: '请输入跳转链接',
            name: '跳转链接：'
          }
        },
        pickerOptions: {
          disabledDate(time) {
            const date = new Date()
            return time.getTime() < date.getTime() || time.getTime() > (date.getTime() + 3600 * 1000 * 24 * 7)
          }
        },
        multipleSelection: [],
        selectedUser: [],
        selectedUsersCount: 0,
        currentPageInitalSelectedUsers: [],
        list: null,

        total: null,
        listLoading: true,

        isSchoolLoading: false, // 所属学校
        userTypes: [], // 用户类型下来选择框结构化数组
        checkAll: false,

        listQuery: {
          pageNo: 1,
          pageSize: 10
        },

        code: '',
        radio: '0',
        fileList: [],
        fileList_2: [],
        dialogTableVisible: false,
        /*fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],*/
        tagValue: '',
        words: 100,
        dataObj: { token: '', key: '' },
        dataObjOriginal: { token: '', key: '' },
        postForm: {
          mobile: null,
          title: '',
          content: '',
          skipRemarks: '',
          image: '',
          mobiles: [],
          skip: 'lesson_detail',
          start: '', // 暂时多余
          startTime: '',
          expired: '', // 暂时多余
          expiredTime: '',
          pushAllResult: 0, // 0: 非全选 ; 1 : 全选
          areaId: null,
          userType: '',
          // type: 0,
          schoolId: ''
        },
        fetchSuccess: true,
        loading: false,

        brandListOptions: [{
          id: 'lesson_detail',
          name: '课程'
        }, {
          id: 'infomation_detail',
          name: '资讯'
        }, {
          id: 'url',
          name: '网页'
        }],
        rules: {
          title: [{ required: true, message: '推送标题必填', trigger: 'blur' }],
          content: [{ required: true, message: '推送内容必填', trigger: 'blur' }],
          skipRemarks: [{ required: true, message: '内容必填', trigger: 'blur' }],
          userType: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
          schoolId: [{ required: true, message: '请选择所属学校', trigger: 'change' }],
          areaIds: [{ required: true, message: '请选择所属地区', trigger: 'change' }]
        },
        // radio: '1' , // 全选状态
        showDialogRadio: true, // 是否显示全选状态按钮
        confirmDialog: false, // 确认保存
        confirmDialogTips: '是否确认保存?' // 确认保存提示语
      }
    },
    watch: {
      'postForm.skip'(val) {
        this.holderVal = this.holderMap[val]
      },
      dialogTableVisible(val) {
        if (val == true) {
          this.$nextTick(() => {
            this.listQuery.pageNo = 1
            this.selectedUser = this.multipleSelection
            this.getUserList()
          })
        }
      }
    },
    mounted() {
      this.getUserList()
      this.headers = { accessToken: getToken() }
      this.fetchAreaData()
      this.fetchUserType()
    },

    computed: {
      ...mapGetters(['schoolsByTitleOptions'])
    },

    methods: {
      closePushDialog() {
        this.notUploadFile = true
        this.dialogTableVisible = false
      },
      handleClickTargetUser() {
        this.dialogTableVisible = true
        // this.postForm = {
        //   mobile: null,
        //   title: '',
        //   content: '',
        //   skipRemarks: '',
        //   image: '',
        //   mobiles: [],
        //   skip: 'lesson_detail',
        //   start: '', // 暂时多余
        //   startTime: '',
        //   expired: '', // 暂时多余
        //   expiredTime: '',
        //   pushAllResult: 0, // 0: 非全选 ; 1 : 全选
        //   areaId: null,
        //   userType: '',
        //   // type: 0,
        //   schoolId: ''
        // };
        this.listQuery = {
          pageNo: 1,
          pageSize: 10
        }
      },
      // 下载xls模板
      downloadModel() {
        window.open('https://static.shengxue985.com/template/push/UserPushExcel.xlsx')
      },
      uploadExcelFile(params) {
        this.listLoading = true
        //自定义文件上传
        if (params) {
          this.fileObj = params.file
        }
        // FormData 对象
        var formData = new FormData()
        // 文件对象
        formData.append('file', this.fileObj)
        formData.append('pageNo', this.uploadFilePagination.pageNo)
        formData.append('pageSize', this.uploadFilePagination.pageSize)
        // 发起请求
        upload(formData).then(res => {
          this.listLoading = false
          if(res.code == 0){
          //   this.$message({
          //     type: "warning",
          //     message: '导入数据失败,请检查表格重新上传'
          //   });
          // } else if (res[0].fail == 0) {
            this.notUploadFile = false
            this.total = res.data.total
            this.list = res.data.list
          // this.$message({
          //   type: "success",
          //   message: `导入数据成功`
          // });
          } else {
            this.$message({
              type: 'warning',
              message: res.message
            })
          }
        }).catch(() => {})
      },
      // 后面上传文件覆盖前面的
      handleExceed(file, fileList) {
        fileList[0].name = file[0].name
        this.files = file[0]
        this.uploadFilePagination = {
          pageNo: 1,
          pageSize: 10
        }
        const params = { file: file[0] }
        this.uploadExcelFile(params)
      },
      bindAreaChangeHandle(val) {
        const lastIndex = val.length - 1
        this.postForm.areaId = val[lastIndex]
      },
      // 确认保存
      confirmSave() {
        this.confirmDialog = false
        // 执行确认保存的程序
        this.pushRequest()
      },

      // 映射 Actions
      ...mapActions(['GetSchoolsByTitleOptions']),
      fetchUserType() {
        getUserType().then(response => {
          const types = response.data
          types[0]['label'] = '全部'
          // todo code初始值更改null?
          types[0]['code'] = ''
          this.userTypes = types
        })
      },

      fetchAreaData() {
        getAreaList().then(response => {
          this.areas = response.data
        })
      },

      getSchoolOptions(title) {
        if (title) this.GetSchoolsByTitleOptions(title)
      },

      clearTag() {
        this.multipleSelection = []
      },
      cancelChangeLesson() {
        this.$refs.postForm.resetFields()
      },
      saveUser() {
        const { pushAllResult } = this.postForm
        this.dialogTableVisible = false
        this.notUploadFile = true
        if (pushAllResult == 0) {
          this.multipleSelection = this.selectedUser
        } else {
          this.multipleSelection = []
        }
        this.selectedUser = []
      },

      handleSizeChange(val) {
        if (this.notUploadFile) {
          this.listQuery.pageSize = val
          this.getUserList()
        } else {
          this.uploadFilePagination.pageSize = val
          this.uploadExcelFile()
        }
      },
      handleCurrentChange(val) {
        if (this.notUploadFile) {
          this.listQuery.pageNo = val
          this.getUserList()
        } else {
          this.uploadFilePagination.pageNo = val
          this.uploadExcelFile()
        }
      },
      getUserList() {
        this.listLoading = true
        const formData = this.postForm
        const params = {
          areaId: formData.areaId,
          mobile: formData.mobile,
          pageNo: this.listQuery.pageNo,
          pageSize: this.listQuery.pageSize,
          schoolId: formData.schoolId,
          userType: formData.userType
        }
        getUserList(params).then(response => {
          const { code, data: { total, list } } = response
          if (code == 0) {
            this.total = total
            this.list = list
            this.listLoading = false
            this.$nextTick(() => {
              this.initalSelectedUsers()
            })
          }
        })
      },
      handleUploadSuccess(rst, file, fileList) {
        const { code, data: { picUrlList } } = rst
        const { postForm } = this
        if (code == 0) {
          postForm['image'] = picUrlList[0]
          this.postForm = postForm
          this.fileList = [{ name: file.url, url: file.url }]
        }
      },

      handlePreview(file) {
      },
      handleClose(tag) {
        this.multipleSelection.splice(this.multipleSelection.indexOf(tag), 1)
      },
      handleRemove(file, fileList) {
        this.postForm['image'] = ''
      },
      handleFilter() {
        if (this.notUploadFile) {
          this.listQuery.pageNo = 1
          // this.listQuery.areaId = this.areaOption[this.areaOption.length - 1]
          this.getUserList()
        }
      },
      async pushRequest() {
        const { postForm } = this
        if (this.multipleSelection.length == 0 && postForm.pushAllResult == 0) {
          this.$message({
            type: 'error',
            message: '请选择目标用户'
          })
          return
        }
        const option = await add(postForm)
        // this.$router.push('/push/table');
        this.$router.push({ path: '/push/table' })
      },
      submitForm() {
        const that = this

        this.$refs.postForm.validate(async valid => {
          if (valid) {
            this.loading = true
            const { postForm, multipleSelection, radio } = this
            const mobiles = []
            const { expired, start } = postForm
            if (expired && expired <= new Date()) {
              this.$notify({
                message: '过期时间不能小于当前时间',
                type: 'error',
                duration: 2000
              })
              return this.loading = false
            }
            if (start && start <= Date.now()) {
              this.$notify({
                message: '定时推送时间不能小于当前时间',
                type: 'error',
                duration: 2000
              })
              return this.loading = false
            }
            if (start && expired) {
              if (expired && start >= expired) {
                this.$notify({
                  message: '定时推送时间不能大于过期时间',
                  type: 'error',
                  duration: 2000
                })
                return this.loading = false
              }
            }
            if (start && radio == '2') {
              postForm['startTime'] = start.getTime()
            }
            if (expired) {
              postForm['expiredTime'] = expired.getTime()
            }
            if (this.postForm.pushAllResult == 0) {
              multipleSelection.map(e => mobiles.push(e.mobile))
            }
            postForm['mobiles'] = mobiles
            const request = Object.assign({}, postForm)
            // 全选状态下数据处理
            if (request.pushAllResult == 1) {
              // delete postForm.areaId;
            } else {

            }

            // 检查是否能发送请求
            const response = await getConserve(request)
            if (response.code == 0) {
              // 调用推送接口
              this.pushRequest()
            // 成功返回处理逻辑
            } else if (response.code == 1) {
              // 有重复点击之类的情况, 弹窗提示用户
              that.confirmDialogTips = response.message
              that.confirmDialog = true
            }
          } else {
            return false
          }
        })
      },
      initalSelectedUsers() {
        this.selectedUsersCount = 0
        this.currentPageInitalSelectedUsers = []
        this.selectedUser.forEach(row => {
          this.list.forEach((list, index) => {
            if (list.mobile == row.mobile) {
              this.$refs.list.toggleRowSelection(this.list[index], true)
              this.currentPageInitalSelectedUsers.push(this.list[index])
              this.selectedUsersCount++
              return
            }
          })
        })
      },
      dealCurrentPageSelected(targetNode, selection, row) {
        const replaceMent = [...this[targetNode]]
        if (this.selectedUsersCount > selection.length) {
          replaceMent.forEach((user, index) => {
            if (user.mobile == row.mobile) {
              replaceMent.splice(index, 1)
              return
            }
          })
        } else {
          replaceMent.push(row)
        }
        this[targetNode] = replaceMent
      },
      getEveryPageSlectionChanged(selection, row) {
        this.dealCurrentPageSelected('selectedUser', selection, row)
        this.dealCurrentPageSelected('currentPageInitalSelectedUsers', selection, row)
        this.selectedUsersCount = selection.length
      },
      dealCurrentPageAllSelected(targetNode, selection) {
        const replaceMent = [...this[targetNode]]
        const parentSelect = (selection.length == 0) ? this.currentPageInitalSelectedUsers : selection
        parentSelect.forEach((row) => {
          replaceMent.forEach((user, index) => {
            if (user.mobile == row.mobile) {
              replaceMent.splice(index, 1)
            }
          })
        })
        selection.forEach((row, index) => {
          replaceMent.push(row)
        })
        this[targetNode] = replaceMent
      },
      getEveryPageSlectionAllChanged(selection) {
        this.dialogRadioStatusVisible = true
        this.dealCurrentPageAllSelected('selectedUser', selection)
        this.dealCurrentPageAllSelected('currentPageInitalSelectedUsers', selection)
        this.selecteUsersCount = selection.length
      },
      selectChangeHandler(selection) {
        this.dialogRadioStatusVisible = !(selection.length < this.list.length)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import 'src/styles/mixin.scss';


  $left-offset: 96px;
  @mixin leftChange {
    padding-left: $left-offset;
    padding-top: 30px;
    box-sizing: content-box;
    @media screen and (max-width: 1205px) {
      padding-left: 0;
      box-sizing: border-box;
    }
  }

  .upload {
    flex: 8;
    font-size: 15px;
    font-weight: 600;
    display: inline-block;
    margin-left: 10px;
  }

  .leftPaddingChange {
    @include leftChange;
    button {
      min-width: 100px;
    }
  }

  .upload-img-dev {
    width: 320px;
    height: 160px;
    position: absolute;
    right: 200px;
    bottom: 60px;
    z-index: 3;
  }

  .upload-img {
    width: 320px;
    height: 160px;
  }

  .tagLeft {
    margin-left: 10px;
  }

  .title-prompt {
    position: absolute;
    right: 0px;
    font-size: 12px;
    top: 10px;
    color: #ff4949;
  }

  .createPost-container {
    position: relative;
    .createPost-main-container {
      padding: 40px 45px 20px 50px;
      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;
        .postInfo-container-item {
          float: left;
        }
      }
      .editor-container {
        min-height: 500px;
        .editor-upload-btn-container {
          text-align: right;
          margin-right: 10px;
          .editor-upload-btn {
            display: inline-block;
          }
        }
      }
    }
    .word-counter {
      width: 40px;
      position: absolute;
      right: -10px;
      top: 0px;
    }
  }
</style>
